<template>
  <!-- 基础信息 -->
  <div>
    <div class="box" id="basebox">
      <!-- 基础信息 -->
      <div class="basebox">
        <div class="title">基础趋势图</div>
        <div class="tld_time">
          <RadioGroup v-model="lookTime" :radio_values="['近7天', '30天', '90天']" />
        </div>
        <van-tabs v-model="activeName3" title-class="tab-name" offset-top="0">
          <van-tab title="点赞趋势" name="a3">
            <van-loading class="loading" v-if="loading" type="spinner" :vertical="true" />
            <div
              style="height: 6.4667rem;"
              v-if="activeName3 == 'a3' && favorit_x1.length != 0 && !loading"
            >
              <!-- 折线图 -->
              <KChart
                v-if="favorit_x1.length != 0 && !loading"
                :xData="favorit_x1"
                :series1="favorit_y1"
                :series2="favorit_y2"
                name1="增量"
                name2="总量"
              />
            </div>
            <div class="zanwu" v-else-if="!loading && favorit_x1.length == 0">
              <img src="@/assets/three/noData.png" />
              <p>暂无数据</p>
            </div>
          </van-tab>
          <van-tab title="评论趋势" name="b3">
            <div
              style="height: 6.4667rem;"
              v-if="activeName3 == 'b3' && favorit_x1.length != 0 && !loading"
            >
              <!-- 折线图 -->
              <KChart
                v-if="favorit_x1.length != 0 && !loading"
                :xData="favorit_x1"
                :series1="comment_y1"
                :series2="comment_y2"
                name1="增量"
                name2="总量"
              />
            </div>
            <div class="zanwu" v-else-if="!loading && favorit_x1.length == 0">
              <img src="@/assets/three/noData.png" />
              <p>暂无数据</p>
            </div>
          </van-tab>
          <van-tab title="转发趋势" name="c3">
            <div
              style="height: 6.4667rem;"
              v-if="activeName3 == 'c3' && favorit_x1.length != 0 && !loading"
            >
              <!-- 折线图 -->
              <KChart
                v-if="favorit_x1.length != 0 && !loading"
                :xData="favorit_x1"
                :series1="share_y1"
                :series2="share_y2"
                name1="增量"
                name2="总量"
              />
            </div>
            <div class="zanwu" v-else-if="!loading && favorit_x1.length == 0">
              <img src="@/assets/three/noData.png" />
              <p>暂无数据</p>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <!-- 评论热词 -->
      <div class="top5">
        <div class="title">评论热词TOP5</div>
        <div class="word" v-if="word && word.length">
          <BarChart v-if="word && word.length" pieName="占比" :pieData="word" />
        </div>
        <div class="zanwu" v-else-if="!loading && word.length == 0">
          <img src="@/assets/three/noData.png" />
          <p>暂无数据</p>
        </div>
      </div>
      <!-- 全部评论 -->
      <div class="discuss">
        <div class="title">全部评论</div>
        <div class="dis_box" v-for="(item, i) in comments" :key="i + 'o'">
          <div class="dis_tit">
            <!-- <img :src="item.logo" alt /> -->
            <div>{{ item.nickname+'：' }}</div>
          </div>
          <!-- 评论 -->
          <!-- <div class="introduce">{{ item.message }}</div> -->
          <div v-if="item.message.length<28" class="introduce">{{ item.message }}</div>
          <div v-else class="introduce inss">
            <TextShowHidden lineHeight="18" line="1" :text="item.message " />
          </div>
          <div class="dis_data">
            <div class="data">{{ timestamp(item.comment_time_stamp, "Y-M-D h:m:s") }}</div>
            <div class="giveheart">
              <img src="../../assets/two/youhua/xinxin_03.jpg" />
              {{
              format_num(item.digg_count)
              }}
            </div>
          </div>
        </div>
        <!-- 暂无列表数据 -->
        <div class="zanwu" v-if="!comments.length && !loading01">
          <img src="@/assets/one/zw.png" alt />
          <p class="zw">暂无数据</p>
        </div>
        <van-loading class="loading" v-if="loading01" type="spinner" :vertical="true" />
        <!-- 查看更多 -->
        <div class="tld_more_box" v-show="comments.length">
          <div class="tld_more_button" v-if="!loading01 && !isLastPage" @click="lookMore">查看更多</div>

          <div class="tld_details" v-if="isLastPage">我是有底线的~</div>
        </div>
      </div>
    </div>
    <div class="line"></div>
  </div>
</template>
<script>
import RadioGroup from '../../component/RadioGroup.vue';
import KChart from '../../component/KChart.vue';
import BarChart from '@/component/BarChart-word';
import TextShowHidden from './textShowHidden';
export default {
  components: { RadioGroup, KChart, BarChart, TextShowHidden },
  data() {
    return {
      lookTime: '30天',
      activeName3: 'a3',
      word: [],
      loading: false,
      loading01: false,
      favorit_x1: [],
      favorit_y1: [],
      favorit_y2: [],
      comment_y1: [],
      comment_y2: [],
      share_y1: [],
      share_y2: [],
      comments: [], //评论信息
      isLastPage: false,
      page: 1,
      pagesize: 5
    };
  },
  watch: {
    lookTime: function (newVal, oldVal) {
      this.changeTime();
    }
  },
  created() {
    this.changeTime();
    this.awemeComments();
  },
  mounted() {},
  methods: {
    // 列表查看更多事件
    lookMore() {
      this.page++;
      this.awemeComments();
    },
    changeTime() {
      this.favorit_x1 = [];
      this.favorit_y1 = [];
      this.favorit_y2 = [];
      this.comment_y1 = [];
      this.comment_y2 = [];
      this.share_y1 = [];
      this.share_y2 = [];
      switch (this.lookTime) {
        case '近7天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;
        case '30天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');

          break;
        case '90天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
      }
      //   切换时间段需要调取的接口
      this.detail();
    },
    detail() {
      this.loading = true;
      this.$axios
        .get(
          `api/aweme/detail?awemeid=${this.$route.query.id}&api-version=2&stime=${this.startDate}&etime=${this.endDate}`
        )
        .then(result => {
          if (result.data.code == 0) {
            this.loading = false;
            if (result.data.data.music) {
              this.music = result.data.data.music;
              if (result.data.data.music.musicChart) {
                this.pie_data01 = result.data.data.music.musicChart;
              }
            }
            if (result.data.data.word) {
              this.word = result.data.data.word;
              this.word = this.word.slice(0, 5);
            }
            this.favorit_x1 = result.data.data.chart.ctime.map(item => {
              return this.timestamp(item, 'M-D');
            });

            this.favorit_y1 = result.data.data.chart.favorit_incr; //点赞增量
            this.favorit_y2 = result.data.data.chart.favorit; //点赞总量
            this.comment_y1 = result.data.data.chart.comment_incr; //评论增量
            this.comment_y2 = result.data.data.chart.comment; //评论总量
            this.share_y1 = result.data.data.chart.share_incr; //转发增量
            this.share_y2 = result.data.data.chart.share; //转发总量
          } else {
            this.loading = false;
          }
        })
        .catch(err => {});
    },
    awemeComments() {
      this.loading01 = true;
      this.isLastPage = false; //列表是否到底
      this.$axios
        .get(
          `api/aweme/comments?awemeid=${this.$route.query.id}&api-version=2&page=${this.page}&size=${this.pagesize}`
        )
        .then(res => {
          this.loading01 = false;
          if (res.data.code == 0) {
            this.comments.push(...res.data.data);
            this.count = res.data.count;
            if (this.comments.length == this.count) {
              this.isLastPage = true;
            }
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
.loading {
  padding: 0.4rem 0;
}
.box {
  width: 9.2rem;
  margin: 0 auto;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
// 标题
.title {
  position: relative;
  font-size: 0.4rem;
  color: #222;
  font-weight: 600;
  padding-left: 0.2rem;
}
.title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 0.08rem;
  height: 0.3733rem;
  background-color: #fd7f2c;
  border-radius: 0.1333rem;
}
.basebox {
  padding-top: 0.693333rem;
  min-height: 8.853333rem;
  .tld_time {
    padding: 0.4rem 0;
  }
}
//   暂无数据
.zanwu {
  width: 5.3333rem;
  height: 4rem;
  margin: 0.8rem auto 0.2rem auto;
  img {
    margin: 0 auto;
    width: 4rem;
    height: 3.2rem;
    display: block;
  }
  p {
    font-size: 0.3467rem;
    line-height: 0.4rem;
    color: #888;
    text-align: center;
  }
}
.word {
  widows: 100%;
  height: 5.6rem;
}
// 全部评论
.dis_box {
  border-bottom: 0.013333rem solid #e5e5e5;
  .dis_tit {
    display: flex;
    img {
      display: block;
      width: 1.0133rem;
      height: 1.0133rem;
      border-radius: 50%;
      margin: 0.4rem 0.266rem 0.266rem 0;
    }
    div {
      font-size: 0.4rem;
      color: #222;
      padding: 0.66rem 0 0.32rem 0;
    }
  }
  //   评论内容
  .introduce {
    font-size: 0.3466rem;
    color: #555;
    line-height: 0.5866rem;
  }
  //   时间+赞数
  .dis_data {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    .data {
      font-size: 0.3466rem;
      color: #888;
    }
    .giveheart {
      img {
        display: inline-block;
        width: 0.4rem;
        height: 0.3466rem;
        margin-right: 0.1rem;
        margin-top: -0.053333rem;
      }
      font-size: 0.3466rem;
      color: #fd7f2c;
    }
  }
}
// 查看更多
.tld_more_box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .tld_more_button {
    width: 2.133333rem;
    height: 0.8rem;
    line-height: 0.8rem;
    text-align: center;
    border-radius: 0.133333rem;
    border: solid 1px #fd7f2c;
    font-size: 0.346667rem;
    color: #fd7f2c;
    margin-top: 0.666rem;
    margin-bottom: 0.666rem;
  }
  .tld_details {
    font-size: 0.32rem;
    color: #b5b5b5;
    margin-top: 0.4rem;
    margin-bottom: 0.666rem;
  }
}
// 分割线
.line {
  width: 100%;
  height: 0.1866rem;
  background: #f1f1f1;
}
</style>
